Forest
A card groups an image, a title and a short line into one tidy unit - ideal for a blog index or a portfolio.
Read moreGeneric Page
Prose
A leading paragraph sets the tone - larger and stronger than the body, it eases the reader in and carries the decorative initial. It can run to a few lines so the reader settles before the main text begins; here it stretches long enough to wrap and show how the text flows around that opening capital.
Below the lead, body text runs at a comfortable reading size in a humanist sans, the measure capped for legibility and the line height kept generous. This is the column the whole template is tuned around - every other element is arranged so the reading stays the focus.
Every paragraph after the first indents its opening line: the classic typographic cue that a new paragraph has begun, without needing a blank line between them. It keeps long passages compact yet clearly segmented, the way a printed book sets its text.
If you write long-form yourself - essays, fiction, documentation - this is the part that matters most, and the part auto-generated pages usually get wrong. It is tuned the same way I tune the reading on my own site, where the words are the whole point.
Paragraphs are justified, and justification is paired with automatic hyphenation so long words break at the margin instead of opening rivers of white space. On a narrow screen the browser just relaxes the spacing - the text never locks into an awkward grid.
Headings
Heading Level 2
The top content heading, marked with a short gradient underline. It is the main divider within a page - use one per major section.
Heading Level 3
A subsection under an H2, flagged with a small accent tick so the hierarchy reads at a glance without heavy styling.
Heading Level 4
A finer division still - handy for breaking a long subsection into named parts inside an article.
Heading Level 5
Rarely needed, but defined so deep documents stay consistent instead of inventing ad-hoc styles.
Heading Level 6
The smallest heading, for the deepest nesting - the end of the scale.
Multi-Column Text
Two columns
Multi-column text flows one passage across balanced columns, the way a magazine or newspaper sets a feature. The browser fills the first column, then the next, keeping their heights even.
It works best for longer runs of text where the eye has a clear top-to-bottom path. Because the columns are pure CSS, there is no JavaScript and nothing to maintain - the text reflows to whatever width it is given.
Use two columns when you have a real block of running text and enough width to keep each line readable. Below a certain measure the lines get too short and reading starts to suffer.
That trade-off is exactly why it is shown here: judge it on a real screen before you commit, rather than trusting it blind.
Three columns
Three tighter columns suit short, scannable notes - feature lists, release details, or captions set as running text.
The narrower each track, the more short sentences matter; long words and justification start to fight for room.
On a phone three columns would be far too narrow to read, so here they collapse to a single column below 640px.
The two-column block above keeps its columns even on a phone - each track stays wide enough - so you can see the trade-off side by side.
Nothing is locked in: the column count is a single CSS value you can change per screen size.
Treat the count as a per-breakpoint decision, not a fixed rule. Check it on a real phone before you commit.
Text Wrap
A figure floated to one side lets the body text wrap around it, filling the space beside the image instead of leaving a gap. It is the natural layout for a portrait or a small supporting picture set inside an article, and it keeps the page from turning into a stack of full-width blocks.
Keep a wrapped image modest in width so the text beside it still holds a readable line length. Here the float is capped at a fraction of the column, and the caption sits quietly beneath the image in the muted figure style.
When the column gets narrow enough that wrapping would squeeze the text, the float drops to full width on its own and the image simply sits between paragraphs - no broken layout, and no manual breakpoint to babysit.
The same figure works on the left, with the paragraph running down its right edge. Alternating sides through a long article keeps the rhythm lively without any extra markup beyond the float direction.
Under the hood this is plain CSS floats with a clearing element - old, unglamorous, and completely reliable in every browser you actually care about.
Cards
Inline Text
Emphasis & marks
Body copy can carry strong emphasis and
italic emphasis, a regular link,
some highlighted text, struck-through wording,
and inline code snippets. Small print sits a notch
quieter than the surrounding text.
Reach for these inside ordinary sentences rather than as blocks: each marks a word or phrase without breaking the flow. They are plain HTML tags, styled once in the design tokens so they stay consistent everywhere they appear.
Keyboard & symbols
Press Ctrl + K to search, or Esc to dismiss. The HTML and CSS here stay close to the standards; footnotes ride high1 and chemistry rides low, as in H2O.
Lists
Unordered
- First item in an unordered list
- Second item, a little longer to show how wrapped lines align under the text rather than the marker
- Item with nested children
- Nested item one
- Nested item two
- Final item
Ordered
- Gather the requirements
- Draft the structure
- Outline the sections
- Mark the priorities
- Build and review
Quotes
Block quote
The details are not the details. They make the design.
- Charles Eames
Pull quote
Table
Bordered
| Plan | Pages | License | Price |
|---|---|---|---|
| Starter | 3 | Personal | Free |
| Standard | 6 | Commercial | Free |
| Complete | 10+ | Commercial | Free |
Minimal
| File | Role |
|---|---|
| tokens.css | Colours, spacing, type - the re-skin layer |
| base.css | Reset and reading typography |
| components.css | Reusable UI blocks |
Buttons
Variants
Semantic
Sizes
With icon
Group
States
Full width
Badges & Tags
Badges
Default
Info
Success
Warning
Muted
Tags
Stats
8
Page types
2
Themes
0
Build steps
100%
Responsive
Swatches
Base
Surface
Text
Accent
Info
Success
Warning
Callouts
Note
A neutral, informational message.
Info
Additional context worth knowing.
Tip
A helpful suggestion or positive note.
Success
An action completed as expected.
Warning
Something needs attention before proceeding.
Danger
A critical error or destructive action.
Important
A neutral but emphasized note.
Quote
A pulled quotation or aside.
Accordion
FAQ
What is included in the package?
A coherent set of pages sharing one design system - landing, blog, portfolio, contact and more, all driven by a handful of CSS variables.
Can I use it commercially?
Yes. Free to use and modify, the only condition being a credit link in the footer.
How do I change the colors?
Edit the variables in
tokens.css - the whole look re-skins from there.Definition list
- Token
- A CSS custom property the whole theme reads from.
- Re-skin
- Changing a handful of tokens to restyle every page at once.
- Component
- A reusable block - button, card, callout, gallery.
Form Controls
Code Block
Code
:root {
--bg0: #0e0e0e;
--fg0: #e7e7e7;
--acc: #888888;
}
body {
background: var(--bg0);
color: var(--fg0);
}Progress & meter
Gallery
Variant A - side-list slider, with a scrolling thumbnail list and filmstrip context.
Variant B - large stage with side arrows and a centered thumbnail strip.
Gathering storm
One slide at a time, moved with a soft transform - no jump, no library.
Heavy clouds
Arrows, dots and a gentle autoplay that pauses on hover.
Lightning
A few lines of vanilla JS you can read end to end.
Variant C - a one-at-a-time carousel with arrows, dots and gentle autoplay.
Cookie Consent (optional)
An opt-in bottom banner. It ships hidden and never auto-pops on this page -
press the button to preview it on demand. On a real site, add
data-cookie-auto to the banner element to show it once on a visitor's
first arrival; the Accept / Decline choice is then remembered in
localStorage so it stays gone.